<template>
  <div @click="reponse()" @mouseenter="enterUpdateCol()" @mouseleave="outUpdateCol()" class="buttonTypeMaxDiv">
    <div class="buttonBorderCol" ref="buttonBorderColEle">
      <span class="buttonSpan">{{colorsName}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ButtonType",
    props: {
      colName: {
        type: Object,
        default: "月入星河"
      },
      borderCol: {
        type: Object,
        default: "silver"
      },
      isLongLight: {
        type: Boolean,
        default: false
      },
      isCanCanCel: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      isLongLight(newVal,oldNew){
        this.isLL = newVal;
        //调用离开方法，让上次常亮的取消常亮
        this.outUpdateCol();
        this.longLight();
      }
    },
    data() {
      return {
        colorsName: this.colName,
        borderCol: this.borderCol,
        isLL: this.isLongLight,
        isCCC: this.isCanCanCel
      }
    },
    methods: {
      enterUpdateCol() {//进入亮起
        let btnBorCol = this.$refs.buttonBorderColEle;
        if (!this.isLL) btnBorCol.style.borderColor = `${this.borderCol}`
      },
      outUpdateCol() {//离开消失
        let btnBorCol = this.$refs.buttonBorderColEle;
        if (!this.isLL) btnBorCol.style.borderColor = `silver`
      },
      reponse(){//点击发送事件，跳转显示另一个商品
        if (!this.isLL || this.isCCC) this.$emit("clickbut",{configName: this.colorsName})
      },
      longLight(){//让当前的选项一直亮起的函数
        if (this.isLL){
          let btnBorCol = this.$refs.buttonBorderColEle;
          btnBorCol.style.borderColor = `${this.borderCol}`
        }
      }
    },
    mounted() {//让当前的选项一直亮起
      this.longLight()
    },
  }
</script>

<style scoped>
  .buttonTypeMaxDiv {
    cursor: pointer
  }

  .buttonBorderCol {
    width: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 5px;
    border: silver solid 1px;
  }
  .buttonSpan{
    font-size: 16px;
  }

</style>
